$page-background: #fff;$week-row-background: #f8f8f8;
$import-btn-background: #007aff;$import-btn-color: #fff;
$border-color: #f0f0f0;$week-cell-font-size: 28rpx;
$time-cell-font-size: 22rpx;$course-info-padding: 10rpx;
$course-info-border-radius: 10rpx;$course-name-font-size: 24rpx;
$course-name-font-weight: bold;$course-room-teacher-font-size: 20rpx;
$course-room-teacher-color: #666;

.page {
  min-height: 100vh;
  background: $page-background;
  display: flex;
  flex-direction: column;

  .schedule-container {
    flex: 1;
    display: flex;
    flex-direction: column;

    .week-row {
      display: grid;
      grid-template-columns: 120rpx repeat(5, 1fr);
      background: $week-row-background;
      padding: 20rpx 0;

      .time-header {
        width: 120rpx;
        position: relative;

        .import-btn {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: $import-btn-background;
          color: $import-btn-color;
          padding: 10rpx 20rpx;
          border-radius: 20rpx;
          font-size: 24rpx;
          white-space: nowrap;
        }
      }

      .week-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: $week-cell-font-size;
      }
    }

    .schedule-body {
      flex: 1;

      .schedule-row {
        display: grid;
        grid-template-columns: 120rpx repeat(5, 1fr);
        border-bottom: 1px solid $border-color;

        .time-cell {
          padding: 20rpx 10rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: $time-cell-font-size;
          color: #666;
          height: 140rpx;

          text {
            text-align: center;
            line-height: 1.3;
          }
        }

        .day-cell {
          border-left: 1px solid $border-color;
          height: 200rpx;
          padding: $course-info-padding;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;

          .course-info {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            width: 100%;
            border-radius: $course-info-border-radius;
            padding: $course-info-padding;
            box-sizing: border-box;

            .course-name {
              font-size: $course-name-font-size;
              font-weight: $course-name-font-weight;
              text-align: center;
              margin-bottom: 5rpx;
            }

            .course-room,
            .course-teacher {
              font-size: $course-room-teacher-font-size;
              color: $course-room-teacher-color;
              text-align: center;
            }
          }
        }
      }
    }
  }
}
